import React, { Component } from "react";
/*
  1. npm i immutabel
  2. import {Map} from 'immutable'
*/
import { Map } from "immutable";
//多层级都要Map 这样子结构的才是map结构才能set get操作
export default class App extends Component {
  state = {
    info: Map({
      name: "kerwin",
      age: 100,
      sex: "male",
      select: "22",
      filters: Map({
        text: "",
        up: true,
        down: false,
      }),
    }),
  };
  componentDidMount() {
    console.log("dwadwad", this.state.info.get("filters"));
  }
  render() {
    return (
      <div>
        <button
          onClick={() => {
            this.setState({
              info: this.state.info.set("name", "lzqq"),
            });
          }}
        >
          click
        </button>
        {this.state.info.get("name")}
        <Child filter={this.state.info.get("filters")}></Child>
      </div>
    );
  }
}

class Child extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.filter === nextProps.filter) {
      return false;
    }
    return true;
  }
  render() {
    return <div>child--</div>;
  }
  componentDidUpdate() {
    console.log("componentDidUpdate");
  }
}
